<template>
  <div class="main-wrapper">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="名称" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item">
        <el-option v-for="(value, key) in status" :key="key" :label="value" :value="key" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="{row}">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column label="所在省市" align="center">
        <template slot-scope="{row}">
          {{ row.provinceName }}{{ row.cityName }}
        </template>
      </el-table-column>
      <el-table-column label="项目价格" align="center">
        <template slot-scope="{row}">
          {{ (row.price) }}
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center">
        <template slot-scope="{row}">
          {{ row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="专业" align="center">
        <template slot-scope="{row}">
          {{ row.professionName }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="132" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="98">
        <template slot-scope="{row}">
          <el-tag :type="row.status | styleFilter()">{{ row.statusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发单方联系方式" align="center">
        <template slot-scope="{row}">
          {{ row.empPhone }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140">
        <template slot-scope="{row}">
          <router-link :to="'/project/detail/' + row.id">
            <el-button size="mini" type="success">详情</el-button>
          </router-link>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">修改</el-button>
          <el-button v-if="row.status < 20" type="warning" size="mini" @click="handleVerify(row)">审核</el-button>
          <el-button v-if="row.status === 30" type="primary" size="mini" @click="handleSettle(row)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
      @pagination="fetchProjectList" />

    <el-dialog title="项目信息审核" width="68%" top="2vh" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="projectData" label-position="left" label-width="100px">
        <el-form-item label="审核">
          <el-switch v-model="projectData.status" active-color="#13ce66" active-text="通过" inactive-text="不通过"
            inactive-color="#ff4949" active-value="20" inactive-value="12" />
        </el-form-item>
        <el-form-item label="项目名称">
          {{ projectData.name }}
        </el-form-item>
        <el-form-item label="项目发布方">
          {{ projectData.employerName }}
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在省市">
              {{ projectData.provinceName }} {{ projectData.cityName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              {{ projectData.empPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型">
              <el-cascader v-model="projectBusiness" :show-all-levels="false" :options="busiConfigs"
                :props="{ expandTrigger: 'hover', label: 'value', value: 'id' }" placeholder="请选择专业" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业">
              <el-cascader v-model="projectProfession" :show-all-levels="false" :options="profConfigs"
                :props="{ expandTrigger: 'hover', label: 'value', value: 'id' }" placeholder="请选择专业"
                @change="professionChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目图片">
          <upload-image :init-image="projectData.imgUrl" @getFileName="getFileName" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="projectData.status | styleFilter()">{{ projectData.statusName }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间">
              {{ projectData.createTime | timeFilter }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目价格">
              {{ projectData.price }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望完成时间">
              {{ projectData.expectTime | timeFilter }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目文档">
          <project-file-list class="document" :file-list="projectData.emplFiles" />
        </el-form-item>
        <el-form-item label="详细信息">
          <div style="white-space: pre-wrap;" v-html="projectData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateProject()">提交</el-button>
      </div>
    </el-dialog>

    <!-- 单独显示，方便修改可修改内容 -->
    <el-dialog title="项目信息修改--可修改项目类型、专业和图片" width="68%" top="2vh" :visible.sync="dialogEditVisible">
      <el-form ref="dataForm" :rules="rules" :model="projectData" label-position="left" label-width="100px">
        <el-form-item label="项目名称">
          {{ projectData.name }}
        </el-form-item>
        <el-form-item label="项目发布方">
          {{ projectData.employerName }}
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在省市">
              {{ projectData.provinceName }} {{ projectData.cityName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              {{ projectData.empPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型">
              <el-cascader v-model="projectBusiness" :show-all-levels="false" :options="busiConfigs"
                :props="{ expandTrigger: 'hover', label: 'value', value: 'id' }" placeholder="请选择专业" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业">
              <el-cascader v-model="projectProfession" :show-all-levels="false" :options="profConfigs"
                :props="{ expandTrigger: 'hover', label: 'value', value: 'id' }" placeholder="请选择专业"
                @change="professionChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目图片">
          <upload-image :init-image="projectData.imgUrl" @getFileName="getFileName" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="projectData.status | styleFilter()">{{ projectData.statusName }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间">
              {{ projectData.createTime | timeFilter }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目价格">
              {{ projectData.price }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望完成时间">
              {{ projectData.expectTime | timeFilter }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目文档">
          <project-file-list class="document" :file-list="projectData.emplFiles" />
        </el-form-item>
        <el-form-item label="详细信息">
          <div style="white-space: pre-wrap;" v-html="projectData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="updateProject()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectList, editProject, getProjectStatus, settleProject, getProject } from '@/api/project'
import { getBusiConfigTree, getProfConfigTree } from '@/api/config'
import { getImageUrl, parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import UploadImage from '@/components/Upload/UploadImage.vue'
import ProjectFileList from '@/components/ProjectFileList'

export default {
  name: 'Project',
  components: {
    Pagination,
    UploadImage,
    ProjectFileList
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 11: 'warning', 10: 'danger', 20: 'success' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20
      },
      projectData: {},
      dialogFormVisible: false,
      dialogEditVisible: false,
      dialogStatus: '',
      status: [],
      projectProfession: [],
      projectBusiness: [],
      busiConfigs: [],
      profConfigs: [],
      rules: {
        busi: [
          { required: true, message: '数据标签不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created() {
    getProjectStatus().then(res => {
      this.status = res.data
    })
    getBusiConfigTree().then(res => {
      this.busiConfigs = res.data
    })
    getProfConfigTree().then(res => {
      this.profConfigs = res.data
    })
    this.fetchProjectList()
  },
  methods: {
    fetchProjectList() {
      this.listLoading = true
      getProjectList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchProjectList()
    },
    resetProjectData() {
      this.projectData = {}
    },
    async handleUpdate(row) {
      await getProject(row.id).then(res => {
        this.projectData = res.data
        if (this.projectData.professionId) {
          if (this.projectData.professionParent) {
            this.projectProfession = [this.projectData.professionParent, this.projectData.professionId]
          } else {
            this.projectProfession = [this.projectData.professionId]
          }
        }

        if (this.projectData.categoryId) {
          if (this.projectData.categoryParent) {
            this.projectBusiness = [this.projectData.categoryParent, this.projectData.categoryId]
          } else {
            this.projectBusiness = [this.projectData.categoryId]
          }
        }
      })
      this.dialogEditVisible = true
    },
    async handleVerify(row) {
      // this.projectData = Object.assign({}, row)
      await getProject(row.id).then(res => {
        this.projectData = res.data
        if (this.projectData.professionId) {
          if (this.projectData.professionParent) {
            this.projectProfession = [this.projectData.professionParent, this.projectData.professionId]
          } else {
            this.projectProfession = [this.projectData.professionId]
          }
        }

        if (this.projectData.categoryId) {
          if (this.projectData.categoryParent) {
            this.projectBusiness = [this.projectData.categoryParent, this.projectData.categoryId]
          } else {
            this.projectBusiness = [this.projectData.categoryId]
          }
        }
      })
      this.dialogFormVisible = true
    },
    updateProject() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.projectData)
          tempData.professionId = this.projectProfession[1] || this.projectProfession[0]
          tempData.professionParent = this.projectProfession[1] && this.projectProfession[0] || 0
          tempData.categoryId = this.projectBusiness[1] || this.projectBusiness[0]
          tempData.categoryParent = this.projectBusiness[1] && this.projectBusiness[0] || 0
          editProject(tempData).then(() => {
            for (const v of this.list) {
              if (v.id === this.projectData.id) {
                console.log(this)
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.projectData)
                break
              }
            }
            this.fetchProjectList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
      this.dialogEditVisible = false
      this.dialogFormVisible = false
    },
    handleSettle(project) {
      this.$confirm('请通过网银等为承接方汇款', '提示', {
        confirmButtonText: '已汇款',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        settleProject(project.id).then(res => {
          this.$notify({
            title: '成功',
            message: '结算信息提交完成',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    professionChange(profession) {
      this.$confirm('您修改了专业类型，是否要修改项目图片', '提示', {
        confirmButtonText: '修改',
        cancelButtonText: '不用修改',
        type: 'warning'
      }).then(() => {
        this.projectData.imgUrl = 'project/' + (profession[1] || profession[0]) + '.png'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '不用修改'
        })
      })
    },
    getFullFileName(name) {
      return getImageUrl(name)
    },
    getFileName(fileName) {
      this.projectData.imgUrl = fileName
    },
    
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  margin: 8px;

  .filter-container {
    padding: 10px 0;

    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 274px;
    height: 152px;
    line-height: 152px;
    text-align: center;
  }

  .avatar {
    width: 274px;
    height: 152px;
    display: block;
  }
}
</style>
